<template>
    <div class="app-container">
        <!-- 搜索相关区域 -->
        <div class="filter-container">
            <el-button size="mini" icon="el-icon-plus" type="primary" class="filter-item"
                @click="addOrUpdateHandle()">新增</el-button>
        </div>

        <!-- 列表相关区域 -->
        <!-- 列表相关区域 -->
        <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
            <!-- 品牌 -->
            <el-table-column label="品牌" prop="brandId" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.brand.name }}</span>
                </template>
            </el-table-column>
            <!-- 分类 -->
            <el-table-column label="平台分类" prop="categoryId" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.category.name }}</span>
                </template>
            </el-table-column>
            <!-- 分类 -->
            <el-table-column label="店铺分类" prop="shopCategoryId" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.shopCategory.name }}</span>
                </template>
            </el-table-column>
            <!-- spu名称 -->
            <el-table-column label="spu名称" prop="name" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.name }}</span>
                </template>
            </el-table-column>
            <!-- 卖点 -->
            <el-table-column label="卖点" prop="sellingPoint" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.sellingPoint }}</span>
                </template>
            </el-table-column>
            <!-- 商品介绍主图 多个图片逗号分隔 -->
            <el-table-column label="商品介绍主图" prop="mainImgUrl" align="center">
                <template slot-scope="{row}">
                    <img width="100" height="50" :src="row.mainImgUrl">
                </template>
            </el-table-column>
            <!-- 售价，整数方式保存 -->
            <el-table-column label="售价(分)" prop="priceFee" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.priceFee }}</span>
                </template>
            </el-table-column>
            <!-- 状态 1:enable, 0:disable -->
            <el-table-column label="状态" prop="status" align="center">
                <template slot-scope="{row}">
                    <el-tag v-if="row.status === 0" size="small" type="danger">已下架</el-tag>
                    <el-tag v-else size="small">已上架</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <!-- 编辑 -->
                    <el-button type="text" @click="addOrUpdateHandle(row.spuId)">
                        编辑
                    </el-button>
                    <!-- 上架 -->
                    <el-button v-if="row.status === 0" type="text" @click="enableOrDisable(row.spuId, 1)">
                        上架
                    </el-button>
                    <!-- 下架 -->
                    <el-button v-if="row.status === 1" type="text" @click="enableOrDisable(row.spuId, 0)">
                        下架
                    </el-button>
                    <!-- 删除 -->
                    <el-button type="text" @click="deleteHandle(row.spuId)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <pagination v-show="pageVO.total > 0" :total="pageVO.total" :page.sync="pageQuery.page" :limit.sync="pageQuery.size"
            @pagination="getPage()" />
    </div>
</template>

<script>
import * as api from '@/api/product/spu'
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            // 查询的参数
            pageQuery: {
                size: 10,
                page: 1,
                name: null,
                attrType: null
            },
            // 返回参数
            pageVO: {
                list: [], // 返回的列表
                total: 1, // 一共多少条数据
            },
            // loading
            pageLoading: false,
            // 查询参数
            searchParam: {
            },
        };
    },
    // 计算属性
    computed: {},
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        addOrUpdateHandle(spuId) {
            console.log("新增或者修改", spuId)
            if (spuId) {
                this.$router.push({ name: "product_update", params: { id: spuId } })
            } else {
                this.$router.push({ name: "product_add" })
            }
        },
        enableOrDisable(spuId, status) {
            console.log("上架或者下架", spuId, status)
            api.spu_status_change({ id: spuId, status }).then(res => {
                this.$message.success("操作成功")
                this.getPage()
            })
        },
        deleteHandle(spuId) {
            console.log("删除", spuId)
            this.$confirm('此操作将删除商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.spu_del(spuId).then(res => {
                    this.$message.success("删除成功")
                    this.getPage()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        getPage() {
            api.page(this.pageQuery).then(res => {
                this.pageVO = res.data
            })
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        this.getPage()
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped></style>